<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>画布小案例</title>
 <style type="text/css">
	#my_canvas{
		border:1px solid red;

	}
 </style>
 </head>
 <body>
	<canvas id="my_canvas" width="500px" height="400px"></canvas>
	<script type="text/javascript">
		var my_canvas=document.getElementById("my_canvas");
		//alert(my_canvas);
		var huabi=my_canvas.getContext("2d");	//获取画笔的对象
		//alert(huabi);
		huabi.rect(10,10,100,100);	//设置画出的矩形的宽高和坐标
		huabi.stroke();				//开始画动
		/* 上面的是化空心矩形*/
		/* 下面来看下实心的矩形*/
		huabi.fillStyle="#b4b4b4";		//设置填充的颜色
		huabi.fillRect(100,100,100,100);	//画动实心的矩形
		huabi.strokeRect(150,150,200,200);	//这就是快速的画出空心的矩形
	</script>
 </body>
 </html>